<template>
    <div v-loading="loading" class="home">
      <van-list

      >
        <div class="van-clearfix">
          <van-cell
            v-for="data in datalist"
            :key="data._id"
          >
          <div class="fengeline"></div>
            <div>
                <img :src="data.imgPath" />
            </div>
            <div class="info">
              <div class="title">{{ data.name }}</div>
              <div class="content">
                <div>
                  性别:<span style="color: orange">{{ data.sex }}</span>
                </div>
                <div class="actors">
                  发现地址:{{ data.address}}
                </div>
                <div class="actors">
                  发现时间:{{ data.time}}
                </div>
                <div class="actors">
                  联系人:{{ data.people}}
                </div>
                <div class="actors">
                  联系方式:{{ data.phone}}
                </div>
              </div>
            </div>
            <!-- <div class="buy">
              <button>联系ta</button>
            </div> -->

          </van-cell>
        </div>
      </van-list>
    </div>
</template>
<script>
import {getInfo} from '@/api/api'
export default {
    data(){
        return{
            loading:true,
            datalist:'',
            total:''
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
            getInfo().then(res=>{
                if(res.data.status==200){
                    this.datalist=res.data.data
                    console.log(this.datalist);
                    this.datalist.filter(item=>{
                        if(item.sex==1){
                            return item.sex='公'
                        }else{
                            return item.sex='母'
                        }
                    })
                    this.total=res.data.total
                    this.loading=false
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>

  .van-list {
    list-style: none;
    .van-cell {
      overflow: hidden;
      padding: 0.625rem;
      img {
        // width: 4.125rem;
        width: 8rem;
        float: left;
        padding: 0.5rem;
        padding-bottom: 2.2rem;
      }
      .title {
        font-size: 18px;
      }
      .content {
        color: gray;
        width: 30rem;
        .actors {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .buy {
        position: relative;
        right: 0.625rem;
        top: -3.125rem;
        float: right;
        button {
          text-align: center;
          width: 3rem;
          font-size: 18px;
          color: red;
          background: white;
          border: 1px solid red;
          border-radius: 0.3125rem;
        }
      }
      .fengeline{
        width: 98%;
        height: 0.125rem;
        background: rgb(240, 236, 236);
      }
    }
  }

</style>
  